<script setup lang="ts">
import type { FormInst, FormRules } from 'naive-ui'
import type { configType } from '@/types/hooks/addDia'
import { diaApi } from '@/hooks/addDialog'
import { useTemplateRef } from 'vue'
import roleApi from '@/service/api/setting/role'
import MacHeader from '@/components/codeBlock/MacHeader'

const emit = defineEmits(['success', 'add', 'edit'])

const modalRef = useTemplateRef<HTMLElement>('modalRef')
const { isFullscreen, toggle } = useFullscreen(modalRef)

const ruleForm = useTemplateRef<FormInst | null>('ruleForm')
type AddRoleItem = {
  roleId?: string
  roleName: string
  roleCode: string
}
const state: configType<AddRoleItem> = {
  editKey: 'roleId',
  ruleForm,
  apis: {
    doAdd: {
      api: roleApi.add,
    },
    doEdit: {
      api: roleApi.edit,
    },
  },
  emit,
  queryForm: {
    roleName: '',
    roleCode: '',
  },
}
const { dialogFormVisible, title, queryForm, open, close, handleValidateClick } =
  diaApi<AddRoleItem>(state)

const rules: FormRules = {
  roleName: [
    {
      required: true,
      message: '请输入角色名称',
      trigger: 'blur',
    },
  ],
  roleCode: [
    {
      required: true,
      message: '请输入角色Code',
      trigger: 'blur',
    },
  ],
}
defineExpose({
  open,
})
</script>

<template>
  <n-modal :show="dialogFormVisible" @updateShow="(e) => !e && close()">
    <div ref="modalRef" class="edit-dia" style="width: 550px">
      <mac-header
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <n-scrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <n-form ref="ruleForm" :model="queryForm" :rules="rules">
              <n-form-item label="角色名称" path="roleName">
                <n-input v-model:value="queryForm.roleName" placeholder="请输入" />
              </n-form-item>
              <n-form-item label="角色Code" path="roleCode">
                <n-input v-model:value="queryForm.roleCode" placeholder="请输入" />
              </n-form-item>
              <n-form-item>
                <div class="tools w-full">
                  <n-button type="primary" attr-type="button" @click="close">
                    <span>取消</span>
                  </n-button>
                  <n-button type="primary" attr-type="button" @click="handleValidateClick">
                    <span>提交</span>
                  </n-button>
                </div>
              </n-form-item>
            </n-form>
          </div>
        </n-scrollbar>
      </div>
    </div>
  </n-modal>
</template>

<style scoped lang="scss"></style>
